<template>
  <div class="disband-class">
    <el-dialog
      class="disband-dialog"
      v-model="visible"
      title="解散班级"
      width="300"
    >
      <span class="tip">班级下可能有学生这样是否删除？</span>
      <p class="btn-box">
        <button class="btn cancel" @click="cancelDisband">取消</button>
        <button class="btn confirm" @click="confirmDisband">确认</button>
      </p>
    </el-dialog>
  </div>
</template>
<script setup>
import { deleteTargetClass } from '@/apis/class-manage/index'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['confirm-disband'])
const visible = defineModel()
const props = defineProps({
  id: {
    default: 0,
    type: Number
  }
})
const cancelDisband = () => {
  visible.value = false
}

const confirmDisband = async () => {
  const res = await deleteTargetClass({ ids: [props.id] })
  if (res?.code === 100200) {
    ElMessage.success(`删除成功！`)
  } else {
    ElMessage.error(`${res?.msg || '删除失败！'}`)
  }
  visible.value = false
  emits('confirm-disband')
}
</script>

<style lang="less" scoped>
.disband-class {
  :deep(.disband-dialog) {
    .el-dialog__header {
      font-size: 24px;
      font-weight: 700;
      color: #040b1a;
    }

    .el-dialog__body {
      .tip {
        font-weight: 500;
        font-size: 18px;
      }

      .btn-box {
        text-align: center;
        margin-top: 20px;

        .btn {
          margin-left: 20px;
          background-color: #fff;
          border: 1px solid @color-brand-regular;
          border-radius: 3px;
          font-size: 16px;
          font-weight: 700;
          padding: 7px 20px;
        }

        .confirm {
          background-color: @color-brand-regular;
          color: #fff;
        }

        .cancel {
          color: @color-brand-regular;

          &:hover {
            background-color: #ecf5ff;
          }
        }
      }
    }
  }
}
</style>
